import * as echarts from 'echarts';

const realTimeCurveOption = (
  myChart: echarts.ECharts,
  data: any,
): echarts.EChartsCoreOption => {
  const seriesArray = [];
  if (Object.keys(data).length === 0) {
    myChart.clear();
  }
  for (const key in data) {
    if (Object.prototype.hasOwnProperty.call(data, key)) {
      // 确保是对象自有属性，不是原型链上的属性
      const oneKey = data[key];
      for (const towKey in oneKey) {
        if (towKey === 'RMS Res') {
          if (Object.prototype.hasOwnProperty.call(oneKey, towKey)) {
            seriesArray.push({
              name: key,
              type: 'line',
              // smooth: true,
              showSymbol: false,
              hoverAnimation: false,
              emphasis: {
                focus: 'series',
              },
              data: oneKey[towKey],
              animation: true, // 开启动画
              animationEasing: 'elasticOut',
              animationDuration: 3000,
              // animationDelay: function (idx) {
              //   return idx * 10 + 100;
              // },
            });
            // 确保是对象自有属性，不是原型链上的属性
          }
        }
      }
    }
  }
  const colors = [
    '#FF44AA',
    '#FF3333',
    '#FFAA33',
    '#FFB3FF',
    '#99FF33',
    '#33FFFF',
    '#5555FF',
    '#9955FF',
    '#E93EFF',
    '#003C9D',
    '#FFFF33',
    '#880000',
  ];
  // setInterval(function () {
  // 更新图表，设置切换动画效果
  myChart.setOption({
    color: colors,
    // tooltip: {
    //   trigger: 'axis',
    //   axisPointer: {
    //     type: 'cross'
    //   },
    //   position: function (pt) {
    //     return ['85%', '80%'];
    //   }
    // },
    legend: {
      x: '5%',
      y: '15%',
      // orient: 'vertical',
      // data: keysName,
      // itemWidth: 15,
      // itemHeight: 10,
      // itemGap: 15,
      // borderRadius: 4,
      // textStyle: {
      //   color: '#000',
      //   fontFamily: 'Alibaba PuHuiTi',
      //   fontSize: 14,
      //   fontWeight: 400,
      // },
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          color: '#EBEEF5', // 指示器线条颜色
          // type: 'solid', // 线条类型
        },
      },
    },
    // grid: {
    //   top:'10%',
    //   left: '10%', //柱状图距离左边的距离，也可以用像素px
    //   right: '18%', //柱状图距离右边的距离，也可以用像素px
    //   bottom: '10%', //网格图（柱状图、折线图、气泡图等）离底部的距离，也可以用像素比如10px
    //   containLabel: false //grid 区域是否包含坐标轴的刻度标签。false可能溢出，默认为false
    // },
    grid: {
      top: '20%',
      left: '10%',
      right: '5%',
      bottom: '20%',
      containLabel: false,
      show: true, // 显示直角坐标系网格
      borderColor: '#ccc', // 网格边线颜色
      borderWidth: 2, // 网格边线宽度
      // backgroundColor: 'rgba(221,221,221,0.5)', // 网格背景颜色
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(1, 13, 19, 0.5)',
      borderWidth: 1,
      axisPointer: {
        // type: 'shadow',
        type: 'shadow',
      },
      textStyle: {
        color: 'rgba(212, 232, 254, 1)',
      },
      extraCssText: 'z-index:2',
    },
    xAxis: [
      // {
      //   //是否显示x轴
      //   show: false,
      //   // 坐标轴类型
      //   type: 'category',
      //   // 坐标轴两边留白策略
      //   boundaryGap: false,`
      //   // x轴刻度数据:横轴坐标是数组名,是外部定义的数组存放x轴的刻度数据,通过
      //   // push(添加)和shift(删除)实现动态效果
      //   data: dataX,
      //   // 是否反向
      //   // inverse: true,
      //   // 坐标轴单位
      //   name: '秒',
      //   // 坐标轴名称显示位置。
      //   nameLocation: 'start',
      //   // 坐标轴名称与轴线之间的距离。
      //   nameGap: 10,
      // },
      {
        type: 'category',
        // boundaryGap: false,
        // //x 轴的位置。
        // position: 'bottom',
        // axisLine: {
        //   show: false,
        // },
        // axisTick: {
        //   show: false,
        // },
        // axisLabel: {
        //   interval: 0,
        //   lineHeight: 16,
        //   fontWeight: 'bold',
        //   color: '#000000',
        //   rotate: 45,
        // },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#ccc',
            // opacity: 0.18,
            // type: 'dashed',
          },
        },
        // data: [
        //   0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 150, 200, 250, 300, 350,
        //   400, 450, 500,
        // ],
        axisLabel: {
          interval: 'auto', // 自动调整标签间隔
        },
        // 坐标轴刻度相关设置。
        // axisTick: {
        //   onZero: false,
        //   // 保证刻度线和标签对齐
        //   alignWithLabel: true,
        //   lineStyle: {
        //     color: '#ccc',
        //   },
        // },
      },
    ],
    yAxis: {
      type: 'log',
      // 整条y轴
      axisLine: {
        show: true,
      },

      axisTick: {
        show: true, // 显示刻度线
        alignWithLabel: true,
        length: 8,
      },
      axisLabel: {
        // 显示每隔一个刻度
        interval: 'auto',
        formatter: (value: number, index: number) => {
          if (index % 2 === 0) {
            return value.toExponential(2);
          } else {
            return '';
          }
        },
        margin: 15,
      },
      // min: 0, // 固定x轴范围
      // max: 500,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#ccc',
          // opacity: 0.18,
          // type: 'dashed',
        },
      },
      // logBase: 5,
    },
    dataZoom: [
      {
        // show: true,
        show: false,
        // realtime: true,
        // start: 100000000000000,
        // end: 85
      },
    ],
    animationEasing: 'elasticOut',
    animationDuration: 3000,
    animationDelayUpdate: function (idx) {
      return idx * 5;
    },
    series: seriesArray,
  });
  // }, 1000); // 定时器每秒执行一次

  return {
    option: {
      animationDuration: 3000,
      // animationDuration: 1000,
      // animationEasing: "bounceOut", //缓动动画
      // animationThreshold: 8, //动画元素的阈值
      animationEasing: 'elasticOut',
      animationDelayUpdate: function (idx) {
        return idx * 5;
      },
    },
  };
};

export default realTimeCurveOption;
